<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态插槽名</title>
</head>
<body>
  <div id="app">
    <button @click="count++">{{ count }}</button>
    <my-com>
      <!-- <template v-slot:[type]>
        {{ type }} 父组件默认值
      </template> -->
      <template #[type]>
        {{ type }} 父组件默认值
      </template>
    </my-com>
    
  </div>
</body>
<template id="com">
  <div >
    <slot name="dan"> 1 动态插槽名   子组件默认值 1</slot>
    <br />
    <slot name="shaung"> 2 动态插槽名   子组件默认值 2</slot>
  </div>
</template>
<script src="../lib/vue.global.js"></script>
<script>
  const { createApp } = Vue

  const Com = {
    template: '#com'
  }

  const app = createApp({
    components: {
      MyCom: Com
    },
    data () {
      return {
        count: 0
      }
    },
    computed: {
      type () {
        return this.count % 2 === 0 ? 'shaung': 'dan'
      }
    }
  })

  app.mount('#app')
</script>
</html>